<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
		<title></title>
		<script src="./js/vue.js"></script>
		<script src="./js/uni.webview.1.5.4.js"></script>

		<style>
			.topvg {
				width: 100%;
				display: flex;
				height: 230px;
				background: linear-gradient(180deg, #111111, rgba(0, 0, 0, 0));
				position: fixed;
				top: 0px;
				left: 0px;
				color: white;
				z-index: 99;
				align-items: flex-start
			}


			.wbbg {
				background: #2b2b2b;
			}

			.btmvg {
				width: 100%;
				display: flex;
				height: 40%;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #111111);
				position: fixed;
				left: 0px;
				bottom: 0px;
				color: white;
				align-items: flex-end;
			}

			.btnitem {
				width: 60px;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 60px;
				background: rgba(207, 207, 207, 0.3);
			}

			input {
				outline-color: invert; //设置元素的轮廓的颜色
				outline-style: none; //设置元素的整个轮廓的样式
				outline-width: 0px; //设置元素整个轮廓的宽度
				border: none;
				border-style: none;
				text-shadow: none;
				-webkit-appearance: none; //去除浏览器默认样式
				-webkit-user-select: text; //禁止用户用鼠标在页面上选中文字、图片等，让页面内容不可选。
				outline-color: transparent;
				box-shadow: none;
			}

			input:focus {
				outline: none;
			}

			.myvidvsmode {
				width: 100%;
				height: 100vh;
				background: linear-gradient(to bottom, #181818, rgba(0, 0, 0, 0.2), #181818);
				position: fixed;
				left: 0px;
				top: 0px;
				z-index: 3;
			}

			video {
				transform: scaleX(-1);
			}

			.vmodelzz {
				width: 70%;
				display: flex;
				align-items: center;
				flex-direction: column;
				position: fixed;
				top: 300px;
				left: 15%;
				z-index: 1076;
				border-radius: 6px;
				background: rgba(255, 255, 255, 0.99);
			}
		</style>
	</head>
	<body style="padding: 0px;margin: 0px;">
		<!-- 创建一个根元素 -->
		<div style="width: 100%;height: 100vh;overflow-y: hidden;" id="home">
			<div v-if="typemode == 'ready'"
				style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;">
				<div
					style="width: 100%;height: 100%;position: fixed;z-index: 2;background: linear-gradient(to bottom,#394158,rgba(61,68,104,0.15),#394158);">

				</div>

				<video src="" autoplay id="vdbgyx"
					style="width: 100%;height: 100%;position: fixed;left: 0rpx;top: 0rpx;z-index: 1;object-fit: cover;"
					object-fit="cover"></video>

				<div v-if="picture" @click="uploadimg"
					style="margin-top: 110px;width: 50%;height: 230px;border-radius: 12px;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255,0.35);flex-direction: column;z-index: 3;">
					<img :src="fileurl + picture" style="width: 100%;border-radius: 12px;max-height: 230px;" mode="widthFix" />
				</div>

				<div v-else @click="uploadimg"
					style="margin-top: 110px;width: 50%;height: 230px;border-radius: 12px;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255,0.35);flex-direction: column;z-index: 3;">
					<div class="">
						<img src="./images/add.png" style="width: 40px;height: 40px;" alt="" />
					</div>
					<div style="color: whitesmoke;margin-top: 10px;">
						设置封面
					</div>
					<input @change="changeimg" id="filecs" type="file"
						style="width: 1px;height: 1px;position: fixed;z-index: -2;" />
				</div>

				<div
					style="margin-top: 25px;width: 65%;border-radius: 6px;display: flex;align-items: center;justify-content: center;background: rgb(255, 255, 255,0.35);flex-direction: column;z-index: 3;">
					<div style="width: 100%;padding: 3px 8px;">
						<input style="background: none;padding: 10px 8px;border: none;" v-model="name"
							placeholder="直播间名称" />
					</div>
				</div>

				<div
					style="margin-top: 15px;width: 65%;border-radius: 6px;display: flex;align-items: center;justify-content: center;background: rgb(255, 255, 255,0.35);flex-direction: column;z-index: 3;">
					<div style="width: 100%;padding: 3px 8px;">
						<input style="background: none;padding: 10px 8px;border: none;" v-model="password"
							placeholder="直播间密码,无密码请留空" />
					</div>
				</div>


				<div
					style="margin-top: 80px;width: 50%;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-direction: column;z-index: 3;">
					<div style="width: 100%;">
						<div @click="start"
							style="display: flex;align-items: center;justify-content: center;height: 42px;background: rgba(255, 52, 52, 0.8);border-radius: 5px;">
							<img src="./images/dlplay.png" style="width: 25px;height: 25px;" mode="" />
							<div style="margin-left: 5px;color: aliceblue;">
								开始直播
							</div>
						</div>
					</div>
				</div>
			</div>

			<div v-show="typemode == 'start'"
				style="width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: flex-end;">
				<div
					style="width: 100%;display: flex;justify-content: center;color: aliceblue;font-size: 13px;position: fixed;top: 30px;left: 0px;z-index: 9;align-items: center;">
					<span style="font-size: 40px;font-weight: bold;"
						:style="{'color':(t%2) == 0 ? 'green' : 'aliceblue'}">·</span> <span>直播中</span>
				</div>

				<div
					style="width: 125px;display: flex;flex-direction: column;align-items: center;position: fixed;right: 13px;top: 30px;z-index: 108;padding: 8px;height: 70vh;overflow-y: auto;">

					<div style="width: 100%;display: flex;padding: 8px;flex-direction: column;align-items: center;border-radius: 6px;background: rgba(190, 199, 223, 0.2);color: #dae3f7;margin-bottom: 8px;"
						v-for="(item,k) in lmuser">
						<div style="width: 100%;height: 180px;border-radius: 6px;">
							<video v-show="item.video" :id="`lmvd_${item.id}`"
								style="width: 100%;height: 180px;object-fit: cover;z-index: 108;" controls src="" autoplay></video>
							<div v-if="!item.video"
								style="width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;">
								<img :src="fileurl + 'avatar/' + item.id + '.jpg'"
									style="width: 35px;height: 35px;border-radius: 35px;margin-bottom: 10px;margin-top: -50px;" alt="" />
								<div
									style="display: flex;justify-content: center;color: aliceblue;margin-bottom: 10px;">
									{{item.name}}
								</div>
								<img v-if="item.audio" src="./images/dfaa.png" style="width: 25px;height: 25px;"
									alt="" />
								<img v-if="!item.audio" src="./images/dfab.png" style="width: 25px;height: 25px;"
									alt="" />
							</div>
							<div
								style="width: 100%;display: flex;justify-content: center;align-items: center;z-index: 199;position: relative;bottom:40px">
								<img @click="kicklmuser(item)" src="./images/closelmuser.png"
									style="width: 30px;height: 30px;" mode="" />
							</div>
						</div>
					</div>
				</div>

				<video muted src="" autoplay id="vdbgyx1"
					style="width: 100%;height: 100%;position: fixed;left: 0rpx;top: 0rpx;z-index: 1;object-fit: cover;"
					object-fit="cover"></video>
				<div class="myvidvsmode"></div>
				<div
					style="width: 100%;display: flex;align-items: center;justify-content: center;margin-bottom: 30px;z-index: 5;">
					<div @click="changeaudio(false)" v-if="myvddata.audio" class="btnitem" style="">
						<img src="./images/mmic.png" style="width: 30px;" mode="widthFix" />
					</div>

					<div @click="changeaudio(true)" v-if="!myvddata.audio" class="btnitem"
						style="background: rgba(255, 94, 94, 0.3);">
						<img src="./images/mmic.png" style="width: 30px;" mode="widthFix" />
					</div>

					<div @click="changevideo(false)" class="btnitem" v-if="myvddata.video" style="margin-left: 20px;">
						<img src="./images/ccamera.png" style="width: 30px;" mode="widthFix" />
					</div>

					<div @click="changevideo(true)" class="btnitem" v-if="!myvddata.video"
						style="margin-left: 20px;background: rgba(255, 94, 94, 0.3);">
						<img src="./images/ccamera.png" style="width: 30px;" mode="widthFix" />
					</div>

					<div @click="changecamera()" class="btnitem" style="margin-left: 20px;">
						<img src="./images/qqhsxt.png" style="width: 30px;" mode="widthFix" />
					</div>

					<div @click="exit" class="btnitem" style="margin-left: 20px;background: #ff5e5e;">
						<img src="./images/hhdown.png" style="width: 30px;" mode="widthFix" />
					</div>
				</div>

				<div v-for="(item,k) in applylist.filter(e=>e.applystatus == 'applying')" style="" class="vmodelzz">
					<div style="margin-top: 15px;font-size: 18px;">连麦申请</div>
					<div style="margin-top: 16px;">
						<img :src="fileurl + 'avatar/' + item.id + '.jpg'"
							style="width: 46px;height: 46px;border-radius: 46px;" alt="" />
					</div>
					<div style="margin-top: 3px;font-size: 14px;">
						{{item.name}}
					</div>
					<div
						style="margin-top: 25px; width: 100%;display: flex;align-items: center;border-top: 1px solid #ebebeb;">
						<div @click="refuse(item)"
							style="color: chocolate; text-align: center;flex: 1;display: flex;justify-content: center;align-items: center;height: 50px;">
							拒绝</div>
						<div style="width: 1px;height: 50px;background: #ebebeb;"></div>
						<div @click="agree(item)"
							style="color: deepskyblue; text-align: center;flex: 1;display: flex;justify-content: center;align-items: center;height: 50px;">
							同意</div>
					</div>
				</div>

			</div>

		</div>
		<script>
			// 将vue挂载到id为home的根元素上
			var vm = new Vue({
				el: "#home",
				data() {
					return {
						id: '',
						uid: '',
						picture: '',
						name: '',
						password: '',
						myvddata: '',
						fileurl: '',
						upurl: '',
						srsUrl: '',
						ip: '',
						cameraType: '',
						typemode: 'ready',
						t: 0,
						sit: '',
						applylist: [],
						lmuser: []
					};
				},
				watch: {
					myvddata: function(v) {
						if (this.typemode == "start") {
							document.getElementById("vdbgyx1").srcObject = v.stream
						} else {
							document.getElementById("vdbgyx").srcObject = v.stream
						}

					},
				},
				onUnmounted() {
					if (this.sit) {
						clearInterval(this.sit)
					}
				},
				methods: {
					kicklmuser: async function(item){
						this.sendMessage({
							type: "kicklmuser",
							data: item
						})
						
					},
					agree: async function(item) {
						item.applystatus = "agree"
						this.sendMessage({
							type: "agree",
							data: item
						})

						for (let o of this.applylist) {
							if (o.id == item.id) {
								o.applystatus = "agree"
								break
							}
						}
					},
					refuse: async function(item) {
						item.applystatus = "refuse"
						this.sendMessage({
							type: "refuse",
							data: item
						})

						for (let o of this.applylist) {
							if (o.id == item.id) {
								o.applystatus = "refuse"
								break
							}
						}
					},
					start: function() {
						const data = {
							picture: this.picture,
							name: this.name,
							password: this.password
						}

						this.sendMessage({
							type: "startdone",
							data
						})

					},
					uploadimg: async function(e) {
						document.getElementById("filecs").click()
						this.myvddata.unpublish()
					},
					changeimg: function(e) {
						console.log(e.target.files[0])
						const file = e.target.files[0]
						const formData = new FormData();
						formData.append('file', file);
						const _this = this
						fetch(`${this.upurl}/upload/upload/image`, {
								method: 'POST',
								body: formData
							})
							.then(response => response.json())
							.then(data => {
								_this.picture = data.data
							})
							.catch(error => console.error(error));
						this.publishStream({
							video: true,
							audio: true,
							videoType: 'face'
						})
						setTimeout(() => {
							document.getElementById("vdbgyx").play()
						}, 1000)
					},
					changecamera: async function(e) {
						const type = this.myvddata.videoType
						let videoType = type
						if (videoType == "face") {
							videoType = "environment"
						} else {
							videoType = "face"
						}
						await this.myvddata.unpublish()
						this.publishStreamstartc({
							videoType,
							video: this.myvddata.video,
							audio: this.myvddata.audio,
						})
					},
					changeaudio: function(e) {
						this.myvddata.muteAudio(e)
						this.myvddata.audio = e
						this.sendMessage({
							type: "muteaudio",
							data: {
								audio:this.myvddata.audio,
								video:this.myvddata.video,
							}
						})
					},
					changevideo: function(e) {
						this.myvddata.muteVideo(e)
						this.myvddata.video = e
						this.sendMessage({
							type: "mutevideo",
							data: {
								audio:this.myvddata.audio,
								video:this.myvddata.video,
							}
						})
					},
					exit: async function() {
						try {
							if(this.myvddata){
								await this.myvddata.unpublish()
							}
							
							for(let o of this.lmuser){
								await o.close()
							}
						} catch (e) {
							//TODO handle the exception
						}
						this.sendMessage({
							type: "exit",
							data: {}
						})
					},
					getvideo: async function() {
						const ret = await navigator.mediaDevices.getUserMedia({
							video: true,
							audio: false
						})
						this.src = ret
						this.publishStream({
							video: true
						})

						setTimeout(() => {
							this.subStream()
						}, 5000)
					},
					subStream: async function(e) {
						const _this = this
						const roomId = "liveroomlm"+this.uid
						const id = e.id
						const pc = new RTCPeerConnection(null);
						pc.addTransceiver('audio', {
							direction: 'recvonly'
						});
						pc.addTransceiver('video', {
							direction: 'recvonly'
						});
						let offer = await pc.createOffer();
						let stream = new MediaStream();
						pc.ontrack = function(event) {
							console.log(event);
							stream.addTrack(event.track);
						};
						await pc.setLocalDescription(offer);
						let session = await new Promise(function(resolve, reject) {
							let data = {
								api: `${_this.srsUrl}/rtc/v1/play/`,
								tid: id,
								streamurl: `webrtc://${_this.ip}/${roomId}/${id}`,
								clientip: null,
								sdp: offer.sdp,
							};
							console.log('Generated offer: ', data);
									
							const xhr = new XMLHttpRequest();
							xhr.onload = function() {
								if (xhr.readyState !== xhr.DONE) return;
								if (xhr.status !== 200) return reject(xhr);
								const data = JSON.parse(xhr.responseText);
								console.log('Got answer: ', data);
								return data.code ? reject(xhr) : resolve(data);
							};
							xhr.open('POST', `${_this.srsUrl}/rtc/v1/play/`, true);
							xhr.setRequestHeader('Content-type', 'application/json');
							xhr.send(JSON.stringify(data));
						});
						await pc.setRemoteDescription(
							new RTCSessionDescription({
								type: 'answer',
								sdp: session.sdp
							}),
						);
									
						function close() {
							stream.getTracks().forEach(function(track) {
								track.stop();
								stream.removeTrack(track);
							});
							pc.close();
						}
									
						const vdata = {
							id,
							roomId,
							name:e.name,
							pc,
							stream,
							audio: true,
							video: true,
							close,
						};
									
						this.lmuser.push(vdata)
						
						setTimeout(()=>{
							document.getElementById("lmvd_"+id).srcObject = stream
						},1500)
					},
					subStreama: async function(e) {
						const _this = this
						const roomId = "liveroomlm" + this.uid
						const id = e.id
						const pc = new RTCPeerConnection(null);
						pc.addTransceiver('audio', {
							direction: 'recvonly'
						});
						pc.addTransceiver('video', {
							direction: 'recvonly'
						});
						let offer = await pc.createOffer();
						let stream = new MediaStream();
						pc.ontrack = function(event) {
							console.log(event);
							stream.addTrack(event.track);
						};
						await pc.setLocalDescription(offer);
						let session = await new Promise(function(resolve, reject) {
							let data = {
								api: `${_this.srsUrl}/rtc/v1/play/`,
								tid: id,
								streamurl: `webrtc://${_this.ip}/${roomId}/${id}`,
								clientip: null,
								sdp: offer.sdp,
							};
							console.log('Generated offer: ', data);

							const xhr = new XMLHttpRequest();
							xhr.onload = function() {
								if (xhr.readyState !== xhr.DONE) return;
								if (xhr.status !== 200) return reject(xhr);
								const data = JSON.parse(xhr.responseText);
								console.log('Got answer: ', data);
								return data.code ? reject(xhr) : resolve(data);
							};
							xhr.open('POST', `${_this.srsUrl}/rtc/v1/play/`, true);
							xhr.setRequestHeader('Content-type', 'application/json');
							xhr.send(JSON.stringify(data));
						});
						await pc.setRemoteDescription(
							new RTCSessionDescription({
								type: 'answer',
								sdp: session.sdp
							}),
						);
						
						const uuid = `lmvd_${e.id}`

						function close() {
							stream.getTracks().forEach(function(track) {
								track.stop();
								stream.removeTrack(track);
							});
							// stream.close()
							pc.close();
							// document.getElementById(uuid).srcObject = null
						}

						const vdata = {
							id,
							roomId,
							name:e.name,
							pc,
							stream,
							audio: e.audio,
							video: e.video,
							close,
						};
						
						this.lmuser.push(vdata)
						
						setTimeout(()=>{
							document.getElementById(uuid).srcObject = stream
						},1500)
					},
					publishStreamstart: async function(options) {
						const _this = this
						const id = this.uid
						const roomId = 'liveroom'
						const pc = new RTCPeerConnection(null);
						pc.addTransceiver('audio', {
							direction: 'sendonly'
						});
						pc.addTransceiver('video', {
							direction: 'sendonly'
						});
						const stream = await this.getStreamLoc({
							audio: true,
							video: {
								facingMode: options.videoType ? options.videoType : "environment"
							},
						})
						this.cameraType = options.videoType ? options.videoType : "environment"
						console.log(stream);
						stream.getTracks().forEach(function(track) {
							pc.addTrack(track);
							if (track.kind === 'audio') {
								if (options.audio === false) {
									track.enabled = false;
								}
							}
							if (track.kind === 'video') {
								if (options.video === false) {
									track.enabled = false;
								}
							}
						});
						let offer = await pc.createOffer();
						await pc.setLocalDescription(offer);

						let session = await new Promise(function(resolve, reject) {
							let data = {
								api: `${_this.srsUrl}/rtc/v1/publish/`,
								tid: id,
								streamurl: `webrtc://${_this.ip}/${roomId}/${id}`,
								clientip: null,
								sdp: offer.sdp,
							};
							console.log('Generated offer: ', data);

							const xhr = new XMLHttpRequest();
							xhr.onload = function() {
								if (xhr.readyState !== xhr.DONE) return;
								if (xhr.status !== 200) return reject(xhr);
								const data = JSON.parse(xhr.responseText);
								console.log('Got answer: ', data);
								if (data.code === 400) {
									resolve(false);
								}
								return data.code ? reject(xhr) : resolve(data);
							};
							xhr.open('POST', `${_this.srsUrl}/rtc/v1/publish/`, true);
							xhr.setRequestHeader('Content-type', 'application/json');
							xhr.send(JSON.stringify(data));
						});

						console.log(session);
						if (session === false) {
							return false;
						}
						await pc.setRemoteDescription(
							new RTCSessionDescription({
								type: 'answer',
								sdp: session.sdp
							}),
						);

						function muteAudio(type) {
							stream.getTracks().forEach(function(track) {
								if (track.kind === 'audio') {
									track.enabled = type ? type : false;
								}
							});
						}

						function muteVideo(type) {
							stream.getTracks().forEach(function(track) {
								if (track.kind === 'video') {
									track.enabled = type ? type : false;
								}
							});
						}


						async function unpublish() {
							try {
								stream.getTracks().forEach(function(track) {
									track.stop();
									stream.removeTrack(track);
								});
								// stream.close()
								pc.close();
								document.getElementById("bgyx_video_1").srcObject = null
							} catch (e) {
								//TODO handle the exception
							}
						}

						const vdata = {
							id: id,
							roomId: roomId,
							pc,
							stream,
							audio: true,
							video: true,
							videoType: options.videoType ? options.videoType : "environment",
							muteAudio,
							muteVideo,
							unpublish,
						};

						this.myvddata = vdata

						document.getElementById(`vdbgyx1`).srcObject = stream

						setTimeout(() => {
							_this.sendMessage({
								type: "publivestartdone",
								data: {}
							})
						}, 500)
					},
					publishStreamstartc: async function(options) {
						const _this = this
						const id = this.uid
						const roomId = 'liveroom'
						const pc = new RTCPeerConnection(null);
						pc.addTransceiver('audio', {
							direction: 'sendonly'
						});
						pc.addTransceiver('video', {
							direction: 'sendonly'
						});
						const stream = await this.getStreamLoc({
							audio: true,
							video: {
								facingMode: options.videoType ? options.videoType : "environment"
							},
						})
						this.cameraType = options.videoType ? options.videoType : "environment"
						console.log(stream);
						stream.getTracks().forEach(function(track) {
							pc.addTrack(track);
							if (track.kind === 'audio') {
								if (options.audio === false) {
									track.enabled = false;
								}
							}
							if (track.kind === 'video') {
								if (options.video === false) {
									track.enabled = false;
								}
							}
						});
						let offer = await pc.createOffer();
						await pc.setLocalDescription(offer);
					
						let session = await new Promise(function(resolve, reject) {
							let data = {
								api: `${_this.srsUrl}/rtc/v1/publish/`,
								tid: id,
								streamurl: `webrtc://${_this.ip}/${roomId}/${id}`,
								clientip: null,
								sdp: offer.sdp,
							};
							console.log('Generated offer: ', data);
					
							const xhr = new XMLHttpRequest();
							xhr.onload = function() {
								if (xhr.readyState !== xhr.DONE) return;
								if (xhr.status !== 200) return reject(xhr);
								const data = JSON.parse(xhr.responseText);
								console.log('Got answer: ', data);
								if (data.code === 400) {
									resolve(false);
								}
								return data.code ? reject(xhr) : resolve(data);
							};
							xhr.open('POST', `${_this.srsUrl}/rtc/v1/publish/`, true);
							xhr.setRequestHeader('Content-type', 'application/json');
							xhr.send(JSON.stringify(data));
						});
					
						console.log(session);
						if (session === false) {
							return false;
						}
						await pc.setRemoteDescription(
							new RTCSessionDescription({
								type: 'answer',
								sdp: session.sdp
							}),
						);
					
						function muteAudio(type) {
							stream.getTracks().forEach(function(track) {
								if (track.kind === 'audio') {
									track.enabled = type ? type : false;
								}
							});
						}
					
						function muteVideo(type) {
							stream.getTracks().forEach(function(track) {
								if (track.kind === 'video') {
									track.enabled = type ? type : false;
								}
							});
						}
					
					
						async function unpublish() {
							try {
								stream.getTracks().forEach(function(track) {
									track.stop();
									stream.removeTrack(track);
								});
								// stream.close()
								pc.close();
								document.getElementById("bgyx_video_1").srcObject = null
							} catch (e) {
								//TODO handle the exception
							}
						}
					
						const vdata = {
							id: id,
							roomId: roomId,
							pc,
							stream,
							audio: options.audio == false ? false : true,
							video: options.video == false ? false : true,
							videoType: options.videoType ? options.videoType : "environment",
							muteAudio,
							muteVideo,
							unpublish,
						};
					
						this.myvddata = vdata
					
						document.getElementById(`vdbgyx1`).srcObject = stream
					
					},
					publishStream: async function(options) {

						const stream = await this.getStreamLoc({
							audio: false,
							video: {
								facingMode: options.videoType ? options.videoType : "environment"
							},
						})

						async function unpublish() {
							try {
								stream.getTracks().forEach(function(track) {
									track.stop();
									stream.removeTrack(track);
								});

								document.getElementById("vdbgyx").srcObject = null
							} catch (e) {
								//TODO handle the exception
							}
						}

						const vdata = {
							stream,
							unpublish
						};

						this.myvddata = vdata

						document.getElementById("vdbgyx").srcObject = stream

					},
					getStreamLoc: async function(constraints) {
						if (navigator.mediaDevices.getUserMedia) {
							console.log('最新的标准API', navigator.mediaDevices.getUserMedia);
							const rs = await navigator.mediaDevices.getUserMedia(constraints)
							return rs
						} else if (navigator.webkitGetUserMedia) {
							console.log('webkit核心浏览器');
							const rs = await navigator.webkitGetUserMedia(constraints)
							return rs
						} else if (navigator.mozGetUserMedia) {
							console.log('firfox浏览器');
							const rs = await navigator.mozGetUserMedia(constraints);
							return rs
						} else if (navigator.getUserMedia) {
							console.log('旧版API');
							const rs = await navigator.getUserMedia(constraints);
							return rs
						} else {
							const rs = await navigator.mediaDevices.getUserMedia(constraints)
							return rs
						}
					},
					onMessage: async function(e) {
						let message = e
						if (typeof e != 'object') {
							message = JSON.parse(e)
						}

						console.log('HTML接收APP数据', JSON.stringify(message));

						const type = message.type
						const data = message.data
						if (type == "livestart") {
							this.id = data.room.id
							this.uid = data.uid
							this.srsUrl = data.srsUrl
							this.ip = data.ip
							await this.myvddata.unpublish()
							this.typemode = 'start'
							setTimeout(() => {
								this.publishStreamstart({
									video: true,
									audio: true,
									videoType: 'face'
								})
							}, 1000)
						}


						// if (type == "backpress") {
						// 	try {
						// 		await this.myvddata.unpublish()
						// 	} catch (e) {
						// 		//TODO handle the exception
						// 	}
						// 	this.sendMessage({
						// 		type: "closedone",
						// 		data: {}
						// 	})
						// }

						if (type == "close") {
							try {
								await this.myvddata.unpublish()
								await this.uservddata.close()
							} catch (e) {
								//TODO handle the exception
							}
							this.sendMessage({
								type: "closedone",
								data: {}
							})
						}

						if (type == "socket_touser_applylm") {
							data.applystatus = 'applying'
							this.applylist.push(data)
						}

						if (type == "closeapplylm") {
							this.applylist = this.applylist.filter(ex => ex.id != data.id)
							this.lmuser = this.lmuser.filter(ex => ex.id != data.id)
						}

						if (type == "closeapplylmx") {

							try {
								for (let o of this.lmuser) {
									if (o.id == data.id) {
										await data.close()
										break
									}
								}
							} catch (e) {
								//TODO handle the exception
							}
							this.lmuser = this.lmuser.filter(ex => ex.id != data.id)
							this.applylist = this.applylist.filter(ex => ex.id != data.id)
						}

						if (type == "liveroomlmenter") {
							this.applylist = this.applylist.filter(ex => ex.id != data.user.id)
							for (let o of this.lmuser) {
								if (o.id == data.user.id) {
									return
								}
							}
							this.subStream(data.user)
						}
						
						if (type == "lmuserchangeinfo") {
							for(let o of this.lmuser){
								if(o.id == data.user.id){
									o.video = data.data.video
									o.audio = data.data.audio
									break
								}
							}
						}


					},
					sendMessage: function(e) {
						uni.postMessage({
							data: e
						})
					}
				},
				mounted() {
					const _this = this
					let params = new URLSearchParams(window.location.search);
					let fileurl = decodeURIComponent(params.get('fileurl'));
					let upurl = decodeURIComponent(params.get('upurl'));
					let uid = decodeURIComponent(params.get('uid'));
					this.fileurl = fileurl
					this.upurl = upurl
					this.uid = uid
					// 监听数据
					window.parent.addEventListener("message", function(e) {
						console.log("YYYY", e)
						let ex = e.data
						if (ex.type == "WEB_INVOKE_APPSERVICE") {
							ex = ex.data.arg
						}
						_this.onMessage(ex)
					})

					this.publishStream({
						video: true,
						audio: true,
						videoType: 'face'
					})
					const sit = setInterval(() => {
						this.t = this.t + 1
					}, 1000)

					this.sit = sit
				},
				created() {},
			});
		</script>
	</body>
</html>